<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="/lib/jquery/dist/jquery.min.js"></script>-->
    <script src="/lib/echarts/dist/echarts.min.js"></script>
    <script src="/lib/sockjs/sockjs.js"></script>
    <script src="/lib/stomp.js"></script>
    <script src="/lib/jquery/dist/jquery.js"></script>
    <script src="/lib/art-template/lib/template-web.js"></script>
    <style>
        .deviceArea {
            position: relative;
            border: 1px dashed green;
            height: 98%;
            width: 99%;
        }
        .device {
            position: absolute;
            top: 5%;
            border: 1px solid red;
            width: 20%;
            height: 50%;
        }
        .device2 {
            position: absolute;
            top: 5%;
            border: 1px solid red;
            width: 20%;
            height: 40%;
        }
        .column {
            border: 1px dashed green;
        }
        td{
            height: 39px;
        }
    </style>
</head>
<body>
<div><h3 class="text-center">明匠智能-非标自动化制造工厂-生产看板</h3></div>
<div class="container" style=" height:1080px; width: 1920px;">
    <div class="row" style=" height:45%;">
        <div class="col-md-6 col-lg-6 clearfix">
            <div id="charts" style=" width: 100%;height:450px;"></div>
        </div>
        <div class="col-md-6 col-lg-6 clearfix" style="vertical-align: middle;text-align: center;">
            <table border="1" class="table " style="margin:0 auto;">
                <tr>
                    <td width="30%">名称</td>
                    <td width="30%">图纸编号</td>
                    <td width="10%">当前工序</td>
                    <td width="20%">创建时间</td>
                    <td width="10%">状态</td>
                </tr>
            </table>
            <div class="scroll" style="height:430px; overflow:hidden;margin:0 auto;">
            <table border="1" id="scrollList" class="table">
                <script id="workOrders" type="text/html">
                    {{each rows}}
                    <tr>
                        <td width="30%">{{$value.part_name}}</td>
                        <td width="30%">{{$value.chart_number}}</td>
                        <td width="10%">{{$value.NAME_}}</td>
                        <td width="20%">{{$value.START_TIME_}}</td>
                        <td width="10%">{{$value.work_order_status}}</td>
                    </tr>
                    {{/each}}
                </script>
            </table>
            </div>
        </div>
    </div>
    <div class="row" id="row2" style="height:50%;">
        <div class="row " style="height:25%;">
            <div class="col-md-3 col-lg-3 column" style="height:100%;">
                <div id="1-1-1" class="deviceArea"><p>原料放置区</p></div>
            </div>
            <div class="col-md-9 column" style="height:100%;">
                <div id="1-2-1" class="deviceArea" style="float:left;width: 20%;">
                    <p>原料放置区</p></div>
                <div id="1-2-2" class="device" style="left: 23%;">数控激光火焰切割机</div>
                <div id="1-2-3" class="device" style="left: 44%;">数控等离子切割机</div>
                <div id="1-2-4" class="device" style="left: 65%;">数控激光火焰切割机</div>
            </div>
        </div>
        <div class="row" style="height:25%;">
            <div class="col-md-3 column" style="height:100%;">
            </div>
            <div class="col-md-9 column" style="height:100%;">
                <div id="2-2-1" class="device" style="left: 1%; width: 15%">卧铣</div>
                <div id="2-2-2" class="device" style="left: 17%;width: 15%">卧铣</div>
                <div id="2-2-3" class="device" style="left: 33%;width: 15%">卧铣</div>
                <div id="2-2-4" class="device" style="left: 49%;width: 15%">卧铣</div>
                <div id="2-2-5" class="device" style="left: 65%;width: 15%">卧铣</div>
                <div id="2-2-6" class="device" style="left: 81%;width: 18%">预备炮塔铣</div>
            </div>
        </div>
        <div class="row" style="height:25%;">
            <div class="col-md-3 column" style="height:100%;">
                <div id="3-1-1" class="device2" style="right: 225px;">攻丝机</div>
                <div id="3-1-2" class="device2" style="right: 115px;">摇臂钻</div>
                <div id="3-1-3" class="device2" style="right: 5px;">摇臂钻</div>
                <div id="3-1-4" class="device2" style="right: 115px; top: 50%">中走丝</div>
                <div id="3-1-5" class="device2" style="right: 5px; top: 50%">中走丝</div>
            </div>
            <div class="col-md-9 column" style="height:100%;">
                <div id="3-2-1" class="device2" style="left:1%;width: 10%;">普车</div>
                <div id="3-2-2" class="device2" style="left: 12%;width: 10%;">普车</div>
                <div id="3-2-3" class="device2" style="left: 23%;width: 10%;">普车</div>
                <div id="3-2-4" class="device2" style="left: 34%;width: 10%;">普车</div>
                <div id="3-2-5" class="device2" style="left: 45%;width: 15%;">预备炮数控车床</div>
                <div id="3-2-6" class="device2" style="right: 1%; width: 34%; height: 90%;">折弯机</div>
                <div id="3-2-7" class="device2" style="left: 1%; top: 50%; width: 15%;">HPC650卧式加工</div>
                <div id="3-2-8" class="deviceArea" style="left: 17%; top: 50%; width: 14%; height: 40%;">CNC办公区</div>
                <div id="3-2-9" class="device2" style="left: 32%; top: 50%; width: 15%;">Vmc1000</div>
                <div id="3-2-10" class="device2" style="left: 48%; top: 50%; width: 15%;">T-V</div>
            </div>
        </div>
        <div class="row" style="height:25%;">
            <div class="col-md-3 column" style="height:100%;">
                <div id="4-1-1" class="device2" style="right: 5%;width: 60%;">加工零件成品区</div>
                <div id="4-1-2" class="device2" style="right: 5%;width: 60%;top:50%;">出货打包区</div>
            </div>
            <div class="col-md-4 column" style="height:100%;">
                <div id="4-2-1" class="device2" style="right: 68%; font-size: 12px">T111</div>
                <div id="4-2-2" class="device2" style="right: 46%; font-size: 12px">VMC1000L</div>
                <div id="4-2-3" class="device2" style="right: 24%; font-size: 12px">VMC1000L</div>
                <div id="4-2-4" class="device2" style="right: 24%;top: 50%;width: 42%; ">5000*2500龙门</div>
            </div>
            <div class="col-md-5 column" style="height:100%;">
                <div id="3-3-1" class="device2" style="left : 2%;width: 96%; ">定梁式龙门GLU28*40</div>
                <div id="4-3-1" class="device2" style="left : 2%;top: 50%;width: 45%; ">T-V</div>
                <div id="4-3-2" class="device2" style="right: 2%;top: 50%;width: 45%; ">T-V</div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('charts'));
    myChart.setOption({
        textStyle:{fontSize:16},
        legend: {
            data:['计划生产','实际生产','计划工时','实际工时']
        },
        xAxis :[{ type : 'category', data : []}],
        yAxis :[{ type : 'value', name : '任务量', splitLine:{show:false}, axisLabel : {formatter: '{value}'}},
                { type : 'value', name : '工  时', splitLine:{show:false}, axisLabel : {formatter: '{value}'}}
        ],
        series : [
            {name:'计划生产', type:'bar', label: {normal: {show: true,position: 'top',}}, data:[]},
            { name:'实际生产', type:'bar',label: {normal: {show: true,position: 'top',}}, data:[]},
            { name:'计划工时', type:'line',label: {normal: {show: true,position: 'top',}}, yAxisIndex: 1, data:[]},
            { name:'实际工时', type:'line',label: {normal: {show: true,position: 'top',}}, yAxisIndex: 1, data:[]}
        ]
    });
</script>
<script type="text/javascript">
    function autoScroll(obj) {
        $(obj).find("table").animate({
            marginTop: "-39px"
        }, 500, function () {
            $(this).css({marginTop: "0px"}).find("tr:first").appendTo(this);
        })
    }

    function wsConnect() {
        var socket = new SockJS('/mj-websocket');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            stompClient.subscribe('/topicKanBan/deviceData', function (data) {
                var jsonDate = JSON.parse(data.body);
                deviceColorChange(jsonDate.devicePosition,jsonDate.deviceState);

            });
            stompClient.subscribe('/topicKanBan/tableData', function (data) {
                var jsonDate = JSON.parse(data.body);
                var html = template("workOrders", jsonDate);
                $("#scrollList").html(html);
            });
            stompClient.subscribe('/topicKanBan/chartsData', function (data) {
                reloadChartData();
            });
        });
    }

    function deviceColorChange(deviceId, color) {
        var sth = ''+color;
        switch (sth) {
            case '1':
                $("#" + deviceId).css("background-color", "#F0F708");break;
            case '2':
                $("#" + deviceId).css("background-color", "#3EF907");break;
            case '3':
                $('#' + deviceId).css("background-color", "#F90707");break;
            case '4':
                $("#" + deviceId).css("background-color", "#C16088");break;
        }
    }

    function getScrollData() {
        $.post("/kanBan/workOrders", null
            , function (result) {
                var html = template("workOrders", result);
                $("#scrollList").html(html);
            },"json");
    }

    function changeBackgroudColor() {
        $.ajax({
            type: "POST",
            url: "/kanBan/queryAllColor",
            timeout: 5000,
            dataType: "json",
            cache: false,
            success: function (data) {
                var list = data.items;
                for (var i = 0; i < data.length; i++) {
                    deviceColorChange(list[i].device_position,list[i].device_state);
                    }
            },
            error: function () {
                $.messager.alert("提示", "出现了不可预知的错误，请重新操作！");
            }
        })
    }

    function reloadChartData() {
        $.post('/kanBan/chartsData',function (data) {
            // 填入数据
            myChart.setOption({
                xAxis: {data: data.categories},
                series: [{name: '计划生产',data: data.plan},
                    {name: '实际生产',data: data.actual},
                    {name: '计划工时',data: data.planEstimate},
                    {name: '实际工时',data: data.actualEstimate}
                ]
            });
        });
    }

    $(function () {
        setInterval('autoScroll(".scroll")', 2000);
        wsConnect();
        getScrollData();
        changeBackgroudColor();
        reloadChartData();
    })

</script>
</body>
</html>